<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pms_ajax_emp</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h2>Ajax 组合查询1</h2>
<label for="department">部门：</label>
<select name="department" id="department"></select>
<br><br>
<label for="name">姓名：</label>
<input type="text" id="name">
<button id = "btn">查询</button>
<div id="content"></div>
<div id="showtab"></div>

</body>
</html>
<script>
    $(document).ready(function(){
        // alert("提示信息！");
        $.ajax({
            url:'/emp/query_dept/',
            type:'GET',
            dateType:'json',
            success:function(resp){
                $.each(resp,function(i,item){
                    $('#department').append('<option value="'+item.id+'">'+item.name+'</option>');
                });
               // $('#department').append('<option value=" ">全部</option>');
            }
        });

        $('#btn').click(function(){
            cname = $('#name').val(); //获得文本框的内容
            cid = $('#department').val(); //获得选择项的value值
            // alert(id);
            $.ajax({
                url:'/emp/ajax_query/',
                type:'GET',
                dateType:'json',
                data:{'name':cname,'id':cid},
                success:function(resp){
                    $('#content').empty();
                    var text = "<table border='1'><tr><th>序号</th><th>姓名</th><th>性别</th><th>工作</th><th>生日</th><th>身份证号</th><th>地址</th><th>工资</th></tr>";
                    $.each(resp,function(i,item) {
                        text += "<tr>";
                        text += "<td>" + item.id + "</td>";
                        text += "<td>" + item.name + "</td>";
                        text += "<td>" + item.gender + "</td>";
                        text += "<td>" + item.job + "</td>";
                        text += "<td>" + item.birthdate + "</td>";
                        text += "<td>" + item.idcard + "</td>";
                        text += "<td>" + item.address + "</td>";
                        text += "<td>" + item.salary + "</td>";
                        text += "</tr>";
                    });
                    text +="</table>";
                    $('#content').html(text);

                     //   $('#content').append(item.id,item.name,item.gender,item.job,item.birthdate,
                    //    item.idcard,item.address,item.salary,'<br>');
                    }
// https://zhidao.baidu.com/question/2204172673132761108.html
            });
        });
    });
</script>